<%--
  Created by IntelliJ IDEA.
  User: jshand
  Date: 2022-01-01
  Time: 9:59
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<html>
<head>
    <title>编写文章</title>

    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/mdeditor/css/style.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/mdeditor/css/editormd.css"/>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/h-ui.admin/css/style.css"/>
    <link href="${pageContext.request.contextPath}/assets/css/front.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="${pageContext.request.contextPath}/lib/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/assets/mdeditor/editormd.min.js"></script>
    <script type="text/javascript" src="lib/layer/2.4/layer.js"></script>


    <style>

        .content_warp {
            display: flex;
        }

        .content_warp .lWrap {
            flex: 7;
            border: solid 1px #ccc;
            margin-right: 30px;
        }

        .content_warp .rWrap {
            flex: 3;
            background-color: #ffffff;
            border: solid 1px #ccc;
        }

        /*文本框的样式*/
        .inputTitle {
            margin-top: 10px;
            outline: none;
            border: solid 2px #00A65A;
            height: 34px;
            font-size: 15px;
            line-height: 34px;
            width: 100%;
            margin-bottom: 20px;
        }


        .tagcontainer {
            width: 100%;
            /*height: 100px;*/
            border: solid 1px #ccc;
            padding: 10px;
        }

        .tagcontainer .tagInputWrap {
            border: solid 2px #CCCCCC;
            margin: 3px;
            border-radius: 3px;
            padding: 2px;
        }

        .tagcontainer .tagInputWrap input {
            border: none;
            outline: none;
        }

        .tagcontainer .tagInputWrap .tag_item {
            display: inline-block;
            background-color: #5BC0DE;
            color: white;
            border-radius: 3px;
            font-size: 8px;
            padding: 5px;
            font-weight: 900;
            margin: 0 2px 1px 0px;
        }

        .tagcontainer .tagInputWrap .tag_item .remove {
            display: inline-block;
            cursor: pointer;
        }

        .tagcontainer .tagInputWrap .tag_item .remove:hover {
            background-color: #4cabde;
        }

        .rWrap .cate {
            margin-top: 20px;
            background-color: #ffffff;
            border-top: solid 5px #D2D6DE;
            border-radius: 5px;
            padding: 10px 20px;
        }

        .rWrap .blogbtn {

            height: 30px;
            width: 40px;
            line-height: 30px;
            border: solid 1px #D2D6DE;
            border-radius: 3px;
            cursor: pointer;
        }

        .rWrap .draft {
            color: #888888;
            background-color: #F4F4F4;
            float: left;
        }

        .rWrap .draft:hover {
            background-color: #dedede;
        }

        .rWrap .deploy {
            color: #ffffff;
            background-color: #3C8DBC;
            float: right;
        }

        .rWrap .deploy:hover {
            background-color: #3681ac;
        }

    </style>
</head>
<body>

<jsp:include page="/include/top.jsp"></jsp:include>


<form id="form">
    <input type="hidden" name="_type" value="savePost"/>
    <input type="hidden" id="tag" name="tags" value=""/>
    <input type="hidden" id="status" name="status" value=""/>
    <div class="content_warp">
        <div class="lWrap">
            <input type="text" class="inputTitle" name="title" value=""/>

            <div id="summaryMd">
                <textarea placeholder="请输入" name="summary" style="display:none;"></textarea>
            </div>


        </div>

        <div class="rWrap">

            <div class="cate">

                <div>栏目</div>
                <div>

                    <select name="channelId">
                        <c:forEach items="${channelList}" var="channel">
                            <option value="${channel.id}"
                                    <c:if test="${post.channelId == channel.id}">selected</c:if>         >${channel.name}</option>
                        </c:forEach>

                    </select>


                </div>
                <div>标签</div>
                <div>
                    <div class="tagcontainer">

                        <div>标签(用逗号或空格分隔)</div>
                        <div class="tagInputWrap">
                            <input type="text" id="inputTag" value="" onblur="appendTag(this)" placeholder="添加相关标签,逗号分割"
                                   width="70px"/>
                        </div>

                    </div>


                </div>
                <hr style="margin-top: 30px; border: solid 2px black;">
                <div style="margin-top: 10px;">

                    <button class="blogbtn draft" onclick="toSubmit(1)" type="button">
                        草稿
                    </button>

                    <button class="blogbtn deploy" onclick="toSubmit(0)" type="button">
                        发布
                    </button>

                    <div class="clear"></div>
                </div>

            </div>


        </div>


    </div>
</form>
<jsp:include page="/include/foot.jsp"></jsp:include>


<script>

    $(function () {
        testEditor = editormd("summaryMd", {
            width: "100%",
            height: 640,
            syncScrolling: "single",
            path: "${pageContext.request.contextPath}/assets/mdeditor/lib/"
        });
    })

    let allTag = [];  //[Java   PHP ]
    function appendTag(input) {


        if (allTag.length >= 4) {
            return input.value = '';
        }
        let tag = input.value;
        if (tag) {
            $(input).before('<div class="tag_item" > ' + tag + '  <div class="remove" onclick="removeTag(this,\'' + tag + '\')" >X</div>  </div>')

            allTag.push(tag);
            $("#tag").val(allTag.join(","));// Java ,PHP

            input.value = '';
        }

    }

    //移除标签的方法
    function removeTag(tagDiv, tagContent) {
        $(tagDiv).parent().remove();
        let delIndex = -1;
        allTag.forEach((tag, i) => {
            if (tag == tagContent) {
                delIndex = i;

                return true;
            }
        })

        allTag.splice(delIndex, 1);

        $("#tag").val(allTag.join(","));// Java ,PHP
    }


    function toSubmit(status) {
        $("#status").val(status);
        //提交表单
        let url = "${pageContext.request.contextPath}/front/user"
        $.ajax(url, {
            type: 'post',
            dataType: 'json',
            data: $("#form").serialize(),
            success: function (ret) {
                if(ret.success){
                    layer.msg("发布成功");
                    location.href="${pageContext.request.contextPath}/user/home"
                }else{
                    layer.alert("发布失败");
                }

            }
        })


    }

</script>


</body>
</html>
